<template>
    <div>
        <el-row>
            <el-col :span="11">
                <div class="chart">
                    <Echarts :options="chartOptions1"/>
                </div>
            </el-col>
            <el-col :span="11" :offset="1">
                <div class="chart">
                    <Echarts :options="chartOptions2"/>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <div class="chart">
                    <Echarts :options="chartOptions3"/>
                </div>
            </el-col>
            <el-col :span="11" :offset="1">
                <div class="chart">
                    <Echarts :options="chartOptions4"/>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import Echarts from "@/components/Echarts.vue";
import { onMounted } from "vue";
import axios from "axios";

import { reactive } from "vue";

const chartOptions1 = reactive({
    title: {
        text: "近30天交易金额统计",
    },
    tooltip: {},
    legend: {
        data: ["交易金额"],
    },
    xAxis: {
        data: [], // 初始化为空数组
        show: false
    },
    yAxis: {},
    series: [
        {
            name: "交易金额",
            type: "line",
            itemStyle: {
                color: '#698E6A'
            },
            data: [], // 初始化为空数组
        },
    ],
});

const chartOptions2 = reactive({
    title: {
        text: "近30天交易笔数统计",
    },
    tooltip: {},
    legend: {
        data: ["交易笔数"],
    },
    xAxis: {
        data: [], // 初始化为空数组
        show: false
    },
    yAxis: {},
    series: [
        {
            name: "交易笔数",
            type: "line",
            itemStyle: {
                color: '#698E6A'
            },
            data: [], // 初始化为空数组
        }
    ]
});

const chartOptions3 = reactive({
  title: {
    text: "交易金额区间分布",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "bottom"
  },
  series: [
    {
      name: "交易总数",
      type: "pie", // 饼图
      radius: "50%",
      data: [] // 数据初始化为空
    }
  ]
});

const chartOptions4 = reactive({
  title: {
    text: "用户评分分布统计",
    left: "center"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "category",
    data: [] // 动态填充评分数据
  },
  yAxis: {
    type: "value",
    name: "次数"
  },
  series: [
    {
      name: "评分次数",
      type: "bar",
      data: [] // 动态填充评分对应的次数
    }
  ]
});


const fetchTransactionData = async () => {
    try {
        // 使用 axios 请求数据
        const response = await axios.get("http://localhost:8088/transactions/getTransactionStats");
        const data = response.data; // 假设数据结构如下：

        // 提取月份和收入数据
        const days = data.map((item) => item.transactionDay);
        const Amount = data.map((item) => item.transactionAmount);
        const count = data.map((item) => item.transactionCount);

        // 动态更新图表配置
        chartOptions1.xAxis.data = days; // 更新横轴数据
        chartOptions1.series[0].data = Amount; // 更新柱状图数据

        chartOptions2.xAxis.data = days;
        chartOptions2.series[0].data = count;
    } catch (error) {
        console.error("获取数据失败：", error);
    }
};

const fetchRangeData = async () => {
  try {
    const response = await axios.get("http://localhost:8088/transactions/getTransactionRanges");
    const data = response.data;

    const rangeData = Object.keys(data).map((range) => ({
      name: range,
      value: data[range]
    }));

    chartOptions3.series[0].data = rangeData;
  }catch (error) {
    console.error('获取数据错误: ', error);
  }
};

// 获取评分数据并更新图表
const fetchUserRatingStats = async () => {
  try {
    const response = await axios.get("http://localhost:8088/transactions/getUserRatingStats");
    const data = response.data;

    // 提取评分和对应的次数
    const ratings = Object.keys(data); // 评分：[1, 2, 3, 4, 5]
    const counts = Object.values(data); // 对应次数：

    // 更新图表数据
    chartOptions4.xAxis.data = ratings; // 横轴显示评分
    chartOptions4.series[0].data = counts; // 柱状图显示评分次数
  } catch (error) {
    console.error("获取用户评分统计数据失败：", error);
  }
};

onMounted(() => {
    fetchTransactionData();
    fetchRangeData();
    fetchUserRatingStats();
});

</script>

<style scoped>
.chart {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
}
</style>